<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二次元工单系统</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="styles_anime.css">
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.11.3/dist/gsap.min.js"></script>
</head>
<body>
    <div id="background-container"></div>
    <div class="container">
        <div class="header">
            <h1 class="anime-title">✿ Please feedback ✿</h1>
        </div>
        <form id="ticketForm" enctype="multipart/form-data">
            <div class="form-group">
                <label for="qqNumber"><span class="heart">♡</span> QQ号码 <span class="required">*</span></label>
                <input type="text" id="qqNumber" name="qqNumber" required placeholder="请输入你的QQ号~">
                <small class="error" id="qqError"></small>
            </div>

            <div class="form-group">
                <label for="feedbackType"><span class="heart">♡</span> 反馈类型 <span class="required">*</span></label>
                <select id="feedbackType" name="feedbackType" required>
                    <option value="">请选择反馈类型</option>
                    <option value="account">账号问题</option>
                    <option value="function">功能故障</option>
                    <option value="suggestion">功能建议</option>
                    <option value="performance">性能问题</option>
                    <option value="security">安全问题</option>
                    <option value="other">其他问题</option>
                </select>
                <small class="error" id="typeError"></small>
            </div>

            <div class="form-group">
                <label for="severity"><span class="heart">♡</span> 问题严重程度 <span class="required">*</span></label>
                <div class="rating" id="severityRating">
                    <input type="radio" id="severity1" name="severity" value="1" required>
                    <label for="severity1">1星 (轻微)</label>
                    <input type="radio" id="severity2" name="severity" value="2">
                    <label for="severity2">2星</label>
                    <input type="radio" id="severity3" name="severity" value="3">
                    <label for="severity3">3星 (一般)</label>
                    <input type="radio" id="severity4" name="severity" value="4">
                    <label for="severity4">4星</label>
                    <input type="radio" id="severity5" name="severity" value="5">
                    <label for="severity5">5星 (严重)</label>
                </div>
                <small class="error" id="severityError"></small>
            </div>

            <div class="form-group">
                <label for="description"><span class="heart">♡</span> 问题描述 <span class="required">*</span></label>
                <textarea id="description" name="description" rows="5" required placeholder="请详细描述你的问题~♪"></textarea>
                <small class="error" id="descriptionError"></small>
            </div>

            <div class="form-group">
                <label for="screenshots"><span class="heart">♡</span> 上传截图 (可选)</label>
                <input type="file" id="screenshots" name="screenshots" multiple accept=".jpg,.jpeg,.png,.bmp,.webp">
                <small>支持JPG、PNG、BMP、WebP格式，单文件不超过5MB</small>
                <small class="error" id="fileError"></small>
                <div id="previewContainer"></div>
            </div>

            <button type="submit" id="submitBtn" class="anime-btn">
                <span>提交工单</span>
                <span class="sparkle">★</span>
            </button>
        </form>
    </div>

    <div class="anime-character"></div>
    <script src="script_anime.js"></script>
</body>
</html>